<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <script src="http://47.104.209.44/base/js/jquery-1.10.1.min.js"></script>
    <title>手机端交互</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .app{
            width:200px;
            height:200px;
            background: darkgreen;
        }
        .box{
            margin-top:400px;
            width:100%;
            height:500px;
            background: yellowgreen;
        }
    </style>
</head>
<body>
    <div id="app" class="app">
        测试App
    </div>
    <div class="box" id="box">
        测试Touches
    </div>



    <script>
        // console.log(100vw)
        window.onload = function(){
            console.log(document.body.clientWidth || document.documentElement.clientWidth)
            console.log(window.devicePixelRatio)   //设备像素密度比 
            var box = document.getElementById("box")
            box.onclick = function(e){
                console.log(e)
            }
            box.ontouchstart = function(e){
                console.log("ontouchstart")
            }

            var startY = 0
            var endY = 0;

            box.addEventListener("touchstart",function(e){
                var e = e || window.event;
                console.log(e)
                // targetTouches = touches 

                var touches = e.touches[0]
                box.innerHTML =     `<p>clientX: ${touches.clientX }</p>`  
                                + `<p>clientY: ${touches.clientY }</p>`
                                + `<p>pageX: ${touches.pageX }</p>`
                                + `<p>pageY: ${touches.pageY }</p>`
                                + `<p>screenX: ${touches.screenX }</p>`
                                + `<p>screenY: ${touches.screenY }</p>`
                                + `<p>滚动距离: ${touches.pageY-touches.clientY }</p>`

                startY = touches.clientY
            })

            box.addEventListener("touchmove",function(e){
                var e = e || window.event;
                // e.preventDefault()
                console.log(e)
                // targetTouches = touches 
                var touches = e.touches[0]
                box.innerHTML =     `<p>clientX: ${touches.clientX }</p>`  
                                + `<p>clientY: ${touches.clientY }</p>`
                                + `<p>pageX: ${touches.pageX }</p>`
                                + `<p>pageY: ${touches.pageY }</p>`
                                + `<p>screenX: ${touches.screenX }</p>`
                                + `<p>screenY: ${touches.screenY }</p>`
                                + `<p>滚动距离: ${touches.pageY-touches.clientY }</p>`
                endY = touches.clientY
            })

            box.addEventListener("touchend",function(e){
                var e = e || window.event;
                console.log(e)
                // targetTouches = touches   离开了屏幕 就没有touches 
                var touches = e.changedTouches[0]  // changedTouches 上一次更新的触摸对象 
                var text = ""
                if(endY-startY<0){
                    text = "向上滑动 - up"
                }else{
                    text = "向下滑动 - down"
                }
                box.innerHTML =     `<p>clientX: ${touches.clientX }</p>`  
                                + `<p>clientY: ${touches.clientY }</p>`
                                + `<p>pageX: ${touches.pageX }</p>`
                                + `<p>pageY: ${touches.pageY }</p>`
                                + `<p>screenX: ${touches.screenX }</p>`
                                + `<p>screenY: ${touches.screenY }</p>`
                                + `<p>滚动距离: ${touches.pageY-touches.clientY }</p>`
                                + `<p>${text}</p>`
            })
        }

        // jquery 可以监听绑定touch 系列事件 但是不能获取到touches信息
        $('#box').on("touchstart",function(e){
            console.log(e)
        })
    </script>

</body>
</html>